<template>
    <div class="search">
        <header>
            <span class="iconfont icon-zuojiantou" @click="goHome"></span>
            <span> 上海<span class="iconfont icon_way"></span>临汾</span>
            <span></span>
        </header>
        <nav>
            <button @click="previous" :disabled="month==monthInit && day==dayInit">前一天</button>
            <div @click="show = true">
                出发日期&nbsp;{{ month }}月{{ day }}日 {{ time == `${new Date().toLocaleString().split("")[0].split(" / ")[0]}${new Date().toLocaleString().split(" ")[0].split(" / ")[1]}${new
                                Date().toLocaleString().split(" ")[0].split("/")[2]}` ? week : week1
                }}
            </div>
            <button @click="next">后一天</button>
        </nav>
        <div class="date" v-show="show">
            <van-calendar title="火车票" v-model:show="show" :poppable="false" :show-confirm="false"
                :style="{ height: '100%' }" @confirm="onConfirm" />
        </div>
        <main>
            <div class="box" @click="goDetail">
                <p>
                    <span class="big">06:24</span>
                    <span class="bigs">合肥南</span>
                    <span class="bigss">
                        二等座 <span>有票</span>
                    </span>
                </p>
                <p>
                    <span>
                        48分
                    </span>
                    <span>
                        G7740
                    </span>
                    <span class="bigss">
                        一等座 <span>有票</span>
                    </span>
                </p>
                <p>
                    <span class="big">06:24</span>
                    <span class="bigs">合肥南</span>
                    <span class="bigss">
                        商务座 <span>有票</span>
                    </span>
                </p>
                <p>
                    <span>
                        ￥67
                    </span>
                </p>
                <p class="split"></p>
            </div>
            
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import './scss/style.scss'
import { dateToDay } from '../../../utils'
import router from "@/router";
let week = ref('今天')
let show = ref(false)
let store = useStore();
let time = ref(null)
let week1 = ref(null)
let timeStamp = localStorage.getItem("timeStamp")
let month = ref(null)
let monthInit = ref(null)
let day = ref(null)
let dayInit = ref(null)

const goHome = () => {
    router.push('/total/home')
}

const goDetail = () => {
    router.push('/ticketDetail')
}

const onConfirm = (x) => {
    let time = x
    let time1 = time.toLocaleString().split(" ")[0].split("/")[1]
    let time2 = time.toLocaleString().split(" ")[0].split("/")[2]
    if(time2<10){
        day.value = `0${time2}`
    }else{
        day.value = time2
    }
    month.value = time1
    show.value = false
    let week2 = new Date(`2022 ${time1}/${time2}`).getDay()
    week.value = dateToDay(week2)
};

const convertToDate = (date) => {
    var date = new Date(date);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    m = m < 10 ? "0" + m : m; //月小于10，加0
    d = d < 10 ? "0" + d : d; //day小于10，加0
    return y + "-" + m + "-" + d;
}

const getNewTime = () => {
    const time1 = convertToDate(new Date(timeStamp*1))
    const time2 = time1.split('-')[1]
    const time3 = time1.split('-')[2]
    month.value = time2
    day.value = time3
}

const getTime = () => {
    const time1 = convertToDate(new Date().getTime())
    const time2 = time1.split('-')[1]
    const time3 = time1.split('-')[2]
    monthInit.value = time2
    dayInit.value = time3
}

//前一天
const previous = () => {
    timeStamp = timeStamp - 24 * 60 * 60 * 1000
    getNewTime()
}

//后一天
const next = () => {
    timeStamp = timeStamp*1 + 24 * 60 * 60 * 1000
    getNewTime()
}
onMounted(() => {
    getNewTime()
    getTime()
})
</script>

<style lang="scss" scoped>

</style>